<template>
  <div class="container">
    <el-form :model="formList" ref="formList" :rules="rules" label-width="120px" :inline="false" size="normal">
      <el-form-item label="上级机构:" v-if="!this.orgId">
        <el-input v-model="formList.super_name" disabled></el-input>
      </el-form-item>
      <el-row :gutter="20">
        <el-col :span="12" :offset="0">
          <el-form-item label="机构名称:" prop="name">
            <el-input v-model="formList.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="0">
          <el-form-item label="运营商编号:">
            <el-select v-model="formList.sys_area" value-key="area_id" disabled class="wid">
              <el-option label="沈阳-居游" value="LA">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12" :offset="0">
          <el-form-item label="归属区域:">
            <el-select v-model="formList.area_id" value-key="area_id" placeholder="" clearable class="wid">
              <el-option v-for="item in areaList" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="0">
          <el-form-item label="机构类型:">
            <el-select v-model="formList.type" value-key="type" disabled class="wid">
              <el-option label="公司" value="1">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12" :offset="0">
          <el-form-item label="机构等级:">
            <el-select v-model="formList.grade" value-key="grade" disabled placeholder="" class="wid">
              <el-option v-for="item in unitLevel" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="0">
          <el-form-item label="是否启用:">
            <el-radio-group v-model="formList.USEABLE">
              <el-radio-button label="1" border>开启</el-radio-button>
              <el-radio-button label="0" border>关闭</el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12" :offset="0">
          <el-form-item label="联系地址:">
            <el-input v-model="formList.address"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="0">
          <el-form-item label="邮政编码:">
            <el-input v-model="formList.zip_code"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12" :offset="0">
          <el-form-item label="电话:">
            <el-input v-model="formList.phone"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="0">
          <el-form-item label="传真:">
            <el-input v-model="formList.fax"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12" :offset="0">
          <el-form-item label="邮箱:">
            <el-input v-model="formList.email"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="0">
          <el-form-item label="负责人:">
            <el-input v-model="formList.master"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12" :offset="0">
          <el-form-item label="主负责人:">
            <el-input v-model="formList.PRIMARY_PERSON"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="0">
          <el-form-item label="副负责人:">
            <el-input v-model="formList.DEPUTY_PERSON"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12" :offset="0">
          <el-form-item label="排序:">
            <el-input v-model="formList.sort"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="0">
        </el-col>
      </el-row>
      <el-form-item label="备注信息:">
        <el-input v-model="formList.remarks" type="textarea" :rows="4" maxlength="255">
        </el-input>
      </el-form-item>
      <!-- 添加机构让其选择默认权限 -->
      <template v-if="!this.orgId">
        <el-form-item>
          <el-checkbox v-model="roleState" size="medium">勾选之后，会自动添加同名的用户。用户初始密码:000000，请尽快修改密码。</el-checkbox>
        </el-form-item>
        <el-form-item label="用户角色:" v-if="roleState">
          <el-select v-model="formList.roleList" value-key="PRIMARY_PERSON" clearable class="wid" multiple>
            <el-option v-for="item in userPower" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </template>
    </el-form>
    <div class="center">
      <el-button type="danger" size="default" @click="cancel">取消</el-button>
      <el-button type="primary" size="default" @click="onEdit" v-if="this.orgId" :loading="saveLoading">修改</el-button>
      <el-button type="primary" size="default" @click="onAdd" v-else :loading="saveLoading">新增</el-button>
    </div>
  </div>
</template>
<script>
export default {
  name: '',
  components: {

  },
  props: {
    orgId: {
      type: String,
      default: () => {
        return ''
      }
    },
    orgParams: {
      type: Object,
      default: () => {
        return {}
      }
    },
    areaList: {
      type: Array,
      default: () => {
        return []
      }
    },
  },
  data () {
    return {
      loading: false,
      saveLoading: false,
      unitLevel: [
        { value: "1", label: "一级" },
        { value: "2", label: "二级" },
        { value: "3", label: "三级" },
        { value: "4", label: "四级" },
        { value: "5", label: "五级" },
        { value: "6", label: "六级" },
        { value: "7", label: "七级" },
        { value: "8", label: "八级" },
        { value: "9", label: "九级" },
        { value: "10", label: "十级" },
      ],
      roleState: true,
      userPower: [],
      formList: {},
      rules: {
        name: [
          { required: true, message: '请输入机构名称', trigger: 'blur' },
        ]
      }
    }
  },
  created () {

  },
  mounted () {
    if (this.orgId) {
      this.init()
    } else {
      this.role()
    }
  },
  methods: {
    async init () {
      const res = await this.$http('sysOrgObj', {
        id: this.orgId
      })
      this.formList = res
    },
    async role () {
      const userRole = await this.$http('sysUserRole', {
        company_id: this.orgParams.parent_id,
        flag: 1
      })
      this.userPower = userRole
      this.formList = this.orgParams
    },
    async onAdd () {
      this.saveLoading = true
      this.$refs['formList'].validate(async (valid) => {
        if (valid) {
          let params = {}
          if (this.roleState) {
            params.set_user = true
            params.login_flag = '1'
          }
          const res = await this.$http('sysOrgUp', {
            ...this.formList,
            ...params
          })
          this.$tips.success(res.errmsg)
          this.$emit('cancel')
          this.$emit('init')
          this.saveLoading = false
        } else {
          this.$tips.error('请检查必填项')
          this.saveLoading = false
          return false;
        }
      })
    },
    onEdit () {
      this.saveLoading = true
      this.$refs['formList'].validate(async (valid) => {
        if (valid) {
          const res = await this.$http('sysOrgUp', {
            ...this.formList
          })
          this.$tips.success(res.errmsg)
          this.$emit('cancel')
          this.$emit('init')
          this.saveLoading = false
        } else {
          this.$tips.error('请检查必填项')
          this.saveLoading = false
          return false;
        }
      })
    },
    cancel () {
      this.$emit('cancel')
    }
  },
  computed: {
    switch () {
      if (this.orgId) {
        return true
      } else {
        return false
      }
    }
  }
}
</script>
<style lang='scss' scoped>
</style>
